<template>
	<view>
		<view :style="{height:`${statusBarHeight}px`}"></view>
		<search-box></search-box>
		<rotation-chart :imgArr="swiperImages"></rotation-chart>
		<function-sort :functionSortArr="functionSortArr"></function-sort>
		<recommond :Rebooks="Rebooks"></recommond>
		<block v-for="(item, index) in bookResources" :key="index">
			<list-header>
				<template #title> {{item.headerTitle}} </template>
			</list-header>
			<book-list :bookListArr="item.books"></book-list>
		</block>
		<myaudio></myaudio>
		<view style="height: 160rpx;"></view>
	</view>
</template>

<script>
	import searchBox from '@/components/searchBox.vue'
	import rotationChart from '@/components/rotationChart.vue'
	import functionSort from '@/components/functionSort.vue'
	import recommond from '@/components/compound/recommond.vue'
	import listHeader from '@/components/listHeader.vue'
	import bookList from '@/components/bookList.vue'
	import myaudio from '@/components/myaudio.vue'
	export default {
		data() {
			return {
				statusBarHeight: this.$statusBarHeight,
				functionSortArr: [{
					iconId: 'icon-icon-test',
					iconColor: 'text-warning',
					name: '看榜单'
				}, {
					iconId: 'icon-startRead',
					iconColor: 'text-hover-primary',
					name: '听小说'
				}, {
					iconId: 'icon-icon09',
					iconColor: 'text-light-black',
					name: '听音乐'
				}, {
					iconId: 'icon-zhishi',
					iconColor: 'text-success',
					name: '听知识'
				}],
				swiperImages: [],
				Rebooks: [],
				bookResources: []
			}
		},
		components: {
			searchBox,
			rotationChart,
			functionSort,
			recommond,
			listHeader,
			bookList,
			myaudio
		},
		onLoad() {
			this.$http.get('/app_index').then(res => {
				this.swiperImages = res.swiperImages // 轮播图片
				this.Rebooks = res.Rebooks // 书源
				this.bookResources = res.bookResources // 图书分类
			})
		}
	}
</script>

<style>

</style>
